iT邦幫忙

2023 iThome 鐵人賽

DAY 9
0

昨天講到第一次Container被mount上去後,它的child也就是Text widget會是如何被append上去的呢?
沒錯就是透過updateChild~但是中間還是有一些步驟在,今天我們來看element tree的最後一哩路巴!

https://ithelp.ithome.com.tw/upload/images/20230924/20147150xD10p7uRxB.png
ComponentElement呼叫mount後會call _firstBuild接下來直接call rebuild,rebuild又呼叫了performRebuild,最後performRebuild裡面就call了updateChild惹。
https://ithelp.ithome.com.tw/upload/images/20230924/20147150iR2Ba45tSM.png
這邊有個細節,前面講過updateChild需要帶三個重要的參數1.current child element 2. new widget 3. new slot,而因為是first build所以沒有current child element所以_child = null,而new widget則是從build()來的。
我們先來看看build()的簽章
https://ithelp.ithome.com.tw/upload/images/20230924/20147150X0rWoHhZQz.png
是不是有種熟悉的感覺?是不是就是我們平常在寫statefullWidget or statelessWidget裡面build method!!
咦不對啊?statelessWidget.build的簽章是 Widget build(BuildContext)才對啊,沒錯很接近惹~我們回台找找StatelessElement.build()的實作
https://ithelp.ithome.com.tw/upload/images/20230924/20147150O5HXjrLJMN.png
沒錯因為element裡面有widget,StatelessElement.build()其實就是element.widget.build(this),通過這番操作build() return了就是new child widget,接下來就是開開心心地執行updateChild,widget就是這樣一層一層的轉換成element最後串成element tree的。

Okay我們終於把element tree的生成過程看完惹,也看到原來天天在寫的build method是在什麼時候被拿來呼叫的,大家是不是覺得flutter的世界真的非常奇妙啊,恭喜你獲得了理解element tree的成就!!


上一篇
第八夜,Flutter的核心(七)
下一篇
第十夜,Flutter的心臟(一)
系列文
Flutter你不知道又不可不知道的核心概念10
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言